<template>
    <div style="min-height:750px">
        <el-row>
            <el-form :model="pictureForm" ref="pictureForm" size="small" :inline="true" label-width="78px">
                <el-form-item label="顾客信息" prop="visitNum">
                    <el-select v-model="pictureForm.visitNum" placeholder="顾客信息" style="width: 450px" clearable
                        @change="search">
                        <el-option v-for="item in baseInfoData" :key="item.visitId"
                            :label="'顾客编号：' + item.visitNum + ' 状态：' + getDiagnosisStatusLabel(item.status) + ' 诊断：' + item.doctorDiagnosis"
                            :value="item.visitNum"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="光照类型" prop="faceLight">
                    <el-select v-model="pictureForm.faceLight" placeholder="光照类型" style="width: 120px" clearable
                        @change="search">
                        <el-option v-for="dict in dicts.photo_lighting_type" :key="dict.dictValue"
                                   :label="dict.dictLabel" :value="dict.dictValue"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="脸部部位" prop="facePart">
                    <el-select v-model="pictureForm.facePart" placeholder="脸部部位" style="width: 120px;margin-left: 10px"
                        clearable @change="search">
                        <el-option v-for="dict in dicts.sys_face_part" :key="dict.dictValue"
                                   :label="dict.dictLabel" :value="dict.dictValue"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="拍照设备" prop="type">
                    <el-select v-model="pictureForm.type" placeholder="拍照设备" style="width: 120px" clearable
                        @change="search">
                        <el-option v-for="dict in dicts.photo_upload_type" :key="dict.dictValue"
                                   :label="dict.dictLabel" :value="dict.dictValue" />
                    </el-select>
                </el-form-item>
                <el-form-item label="采集日期">
                    <el-date-picker v-model="dateRange" style="width: 240px" value-format="yyyy-MM-dd" type="daterange"
                        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" @change="search"></el-date-picker>
                </el-form-item>
                <el-button type="primary" size="mini" @click="search">查询</el-button>
            </el-form>
        </el-row>
        <el-row style="margin-top:15px;" class="imgs">
            <div v-for="(item, index) in comparePicData" :key="index" style="margin: 14px;">
                <div class="user-info-myImg">
                     <myImg style="width: 260px;" :src="item.thumbnail" :preview-src-list="previewSrcList"
                        :fileSizeList="fileSizeListData" :myImgIndex="index">
                     </myImg>
                </div>

<!--                <div class="user-info-head">-->
<!--                  <el-image class="img-style" fit="contain" :src="item.thumbnail" alt=""-->
<!--                            @click="watchBigPic(item, index)"></el-image>-->
<!--                </div>-->
                <div class="pic-info">
                    <div>{{ item.createTime }}</div>
                    <dict-tag :options="dicts.sys_diagnosis_status" :value="item.status" />
                    <dict-tag :options="dicts.photo_upload_type" :value="item.type" />
                    <dict-tag :options="dicts.photo_lighting_type" :value="item.faceLight" />
                    <dict-tag :options="dicts.sys_face_part" :value="item.facePart" />
                    <div>{{ (item.fileSize / 1024 / 1024).toFixed(2) }}M(压缩质量:{{ item.compressionRatio }})</div>
                    <div v-if="item.scoreAi" style="color: #1890ff">Ai mMASI评分:{{ (item.scoreAi ).toFixed(1)}}分</div>
                </div>
            </div>
        </el-row>
<!--        <el-dialog title="照片标注" :visible.sync="picMarkDialogVisible" width="100%" center :close-on-click-modal="false"-->
<!--            :append-to-body="true">-->
<!--            <PhotoMark :currentUrl="currentUrl" :imgList="imgList" :myImgIndex="myImgIndex" v-if="picMarkDialogVisible">-->
<!--            </PhotoMark>-->
<!--        </el-dialog>-->
    </div>
</template>

<script>
import {getDict} from "@/api/dict";

import myImg from "@/components/LandingPage/myImg/myMainImg"
// import PhotoMark from "@/views/components/photoMark/photoMark.vue";
import { listPhotos,getVisit } from "@/api/comparePics";
export default {
    name: "comparePics",
    components: { myImg,  },
    props: {
        patientId: {
            type: Number,
            default: null,
        }
    },
    data() {
        return {
            dicts: {
                sys_diagnosis_status: [],
                photo_upload_type: [],
                photo_lighting_type:[],
                sys_face_part:[],
            },
            baseUrl: process.env.VUE_APP_BASE_API,
            comparePicData: [],
            dateRange: [],
            previewSrcList: [],
            fileSizeListData: [],
            pictureForm: {
                pageNum: 1,
                pageSize: 9999,
                faceLight: '',
                facePart: '',
                type: '',
                patientId: ''
            },
            picMarkDialogVisible: false,
            currentUrl: '',
            imgList: [],
            myImgIndex: '',
            baseInfoData: [],
        };
    },
    async created() {
        await this.init()

        this.getPatientList();
        this.search();
    },
    methods: {
        async init() {
            for (const item in Object.entries(this.dicts)) {
                const key = Object.entries(this.dicts)[item][0]
                await this.getDict(key);
            }
        },
        // 获取字典项
        async getDict(params) {
            const {code, data} = await getDict(params)
            if (code === 200) {
                this.dicts[params] = data || []
            }
        },
        //获取诊断状态字典值对应的label
        getDiagnosisStatusLabel(status) {
            let label = ''
            this.dicts.sys_diagnosis_status.forEach((item) => {
                if (item.dictValue == status) {
                    label = item.dictLabel
                }
            })
            return label

        },
        /** id转化成对应的文字 */
        matchDict: function (key, id) {
            let _this = this;
            const result = _this.dicts[key];
            // console.log('matchDict',result)
            let textValue = "";
            result.forEach((item) => {
                if (item.dictValue == id) {
                    textValue = item.dictLabel;
                }
            });
            return textValue;
        },
        watchBigPic(row, index) {
            this.myImgIndex = index
            this.currentUrl = row.photoAddress
            this.imgList = this.comparePicData
            this.picMarkDialogVisible = true
        },
        // 获取顾客登记列表
        getPatientList() {
            const queryParams = { pageNum: 1, pageSize: 9999, patientId: this.patientId }
            getVisit(queryParams).then(
                (response) => {
                    this.baseInfoData = response.rows
                    this.baseInfoData.forEach(item => {
                        item.doctorDiagnosis = item.doctorDiagnosis.replace(/ *\([^)]*\) */g, "")
                    })
                }
            )
        },

        //查询
        search() {
            this.pictureForm.patientId = this.patientId
            this.getPhotoList()
        },
        //根据病人id获取图片列表
        getPhotoList() {
            listPhotos(this.addDateRange(this.pictureForm, this.dateRange)).then((res) => {
                if (res.rows.length > 0) {
                    this.fileSizeListData = []
                    this.previewSrcList = []
                    this.comparePicData = res.rows;
                    this.comparePicData.forEach((it) => {
                        if (it.score && JSON.parse(it.score).left) {
                            it.scoreAi = 0.3 * JSON.parse(it.score).left.area * JSON.parse(it.score).left.color
                        }
                        if (it.score && JSON.parse(it.score).brow) {
                            it.scoreAi = 0.3 * JSON.parse(it.score).brow.area * JSON.parse(it.score).brow.color + 0.1 * JSON.parse(it.score).chin.area * JSON.parse(it.score).chin.color
                        }
                        if (it.score && JSON.parse(it.score).right) {
                            it.scoreAi = 0.3 * JSON.parse(it.score).right.area * JSON.parse(it.score).right.color
                        }
                        // it.points = this.formatPoints(it.points)
                        it.doctorDiagnosis = it.doctorDiagnosis.replace(/ *\([^)]*\) */g, "")
                        this.previewSrcList.push( it.photoAddress)
                        // this.fileSizeListData.push(`<div>姓名:${it.patientName}</div><div>年龄:${it.age}</div><div >医生诊断:${it.doctorDiagnosis}</div><div>采集状态:${this.matchDict('sys_diagnosis_status', it.status)}</div><div>采集设备:${this.matchDict('photo_upload_type', it.type)}</div><div>采集日期:${it.createTime}</div><div>采集人:${it.createBy}</div><div >${it.scoreAi ? 'Ai mMASI评分:' + it.scoreAi + '分' : ''} </div ><div style='margin-top:20px'>光照类型:${this.matchDict('photo_lighting_type', it.faceLight)}</div><div>部位:${this.matchDict('sys_face_part', it.facePart)}</div><div>文件大小:${(it.fileSize / 1024 / 1024).toFixed(2)}M</div><div>压缩比:${it.compressionRatio}</div>`)

                    })
                } else {
                    this.comparePicData = [];
                }
                console.log('this.previewSrcList', this.previewSrcList)
            });
        },
        // //格式化画图组件点位格式数据
        // formatPoints(data) {
        //     if (data != null) {
        //         let mData = []
        //         console.log(JSON.parse(data))
        //         JSON.parse(data).forEach((item, index) => {
        //             let itPoint = []
        //             item.forEach((it, mindex) => {
        //                 itPoint.push({ x: it[0], y: it[1] })
        //                 if (item.length - 1 === mindex) {
        //                     //最后一个点连接到第一个点形成闭合
        //                     itPoint.push({ x: item[0][0], y: item[0][1] })
        //                 }
        //             })
        //             mData.push({ points: itPoint, type: 'route' })
        //         })
        //         console.log(mData)
        //         return mData
        //     } else {
        //         return null
        //     }
        // },


    },
};
</script>
<style scoped rel="stylesheet/scss"  lang="scss">
//::v-deep .el-dialog {
//    margin-top: 20px !important;
//}
//
//::v-deep .el-dialog:not(.is-fullscreen) {
//    margin-top: 20px !important;
//}

.imgs {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    margin: 14px;
    .user-info-myImg{
        width: 260px;
        height: 412px;
        display: flex;
        align-items: center;
    }
  .user-info-head {
    width: 260px;
    height: 412px;

    //border: 1px solid #000;
    .img-style {
      width: 100%;
      height: 100%;

      ::v-deep .el-image__error {
        opacity: 0;
      }
    }
  }
}

.group-info {
    display: flex;
}

.group-info span {
    margin-right: 15px;
}

.group-info .device div {
    display: inline-block;
    vertical-align: middle;
}
</style>
